<div class="bg-white">
    <main class="isolate">
        <!-- Hero section -->
        <div class="relative">
            <div class="my-32">
                <%= if Azimutt.Services.BlackFridaySrv.should_display? do %>
                    <div class="flex justify-center mb-8 -mt-36">
                        <p class="relative rounded-full px-4 py-1.5 text-sm leading-6 text-indigo-600 bg-indigo-600/10 ring-1 ring-inset ring-indigo-600/10 hover:ring-indigo-600/20">
                            <span class="hidden md:inline mr-1"><b>✨ BlackFriday Offer!</b> Get <span class="underline"><%= Azimutt.Services.BlackFridaySrv.discount %>% OFF</span> for a year with code <b><%= Azimutt.Services.BlackFridaySrv.code %></b></span>
                            <a href={Routes.subscribe_path(@conn, :index)} class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span> Claim discount! <span aria-hidden="true">→</span></a>
                        </p>
                    </div>
                <% else %>
                    <div class="flex justify-center mb-8 -mt-36">
                        <p class="relative rounded-full px-4 py-1.5 text-sm leading-6 text-indigo-600 bg-indigo-600/10 ring-1 ring-inset ring-indigo-600/10 hover:ring-indigo-600/20">
                            <span class="hidden md:inline mr-1"><b>✨ Introducing!</b> <span class="underline">Azimutt Inspector</span>, the first database analysis platform</span>
                            <a href="https://inspector.azimutt.app" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span> Try it now!</a>
                        </p>
                    </div>
                    <!-- <div class="flex justify-center mb-3 -mt-36">
                        <a href="https://www.producthunt.com/posts/azimutt?utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_souce=badge-azimutt" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=390699&theme=light&period=weekly&topic_id=267" alt="Azimutt - Easily&#0032;explore&#0032;and&#0032;analyze&#0032;your&#0032;database&#0032;with&#0032;your&#0032;team | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
                    </div> -->
                <% end %>
                <div class="hidden sm:flex justify-center my-3 space-x-6">
                    <a href={Azimutt.config(:azimutt_github)} target="_blank" rel="noopener noreferrer" class="px-3 py-1 text-sm font-semibold leading-6 text-gray-600 transition duration-300 ease-in-out rounded-full bg-gray-50 ring-1 ring-inset ring-gray-200 hover:bg-gray-100 hover:shadow-lg hover:scale-105">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="inline -mt-1"><path d="M11.86 1.6c1.9 0 3.67.44 5.3 1.31a9.8 9.8 0 015.24 8.75c0 2.27-.65 4.32-1.96 6.12a9.95 9.95 0 01-5.09 3.73c-.23.05-.4.03-.53-.07a.52.52 0 01-.2-.42v-3.46c0-.89-.22-1.5-.7-1.9 1.03-.1 1.8-.25 2.3-.42.79-.27 1.39-.7 1.81-1.24.48-.71.7-1.7.7-2.94 0-.52-.1-.99-.3-1.36-.14-.27-.4-.61-.8-1.03.1-.28.18-.62.2-1a4.67 4.67 0 00-.3-1.82c-.22-.05-.62.02-1.13.22-.32.15-.72.32-1.18.57l-.55.37a9.73 9.73 0 00-5.27 0l-.55-.37a8.54 8.54 0 00-1.2-.57c-.5-.2-.88-.24-1.13-.17a3.9 3.9 0 00-.3 1.83c0 .4.05.69.17.94-.32.42-.57.79-.73 1.13-.15.35-.22.77-.22 1.31 0 1.24.22 2.2.68 2.9.4.56.97 1 1.75 1.28.5.17 1.26.3 2.26.42-.35.32-.58.79-.68 1.4-.47.23-.92.3-1.38.25a2.02 2.02 0 01-1.68-1.1c-.17-.3-.4-.55-.68-.75l-.62-.3-.3-.05c-.3 0-.48.05-.48.15-.03.1.05.2.2.32l.2.18c.2.1.4.3.58.54.17.2.3.42.42.67l.18.32c.15.42.4.74.8.94a3 3 0 001.2.37c.33.02.69.02 1.06-.05l.45-.05.05 2.52c0 .17-.07.3-.2.42-.12.1-.3.15-.52.07a10.13 10.13 0 01-5.17-3.73 10.34 10.34 0 01-1.96-6.15c0-1.88.45-3.58 1.33-5.11a9.93 9.93 0 013.69-3.64 10.53 10.53 0 015.24-1.33zM5.21 15.51c.05-.05.13-.07.2-.02.08.05.1.1.08.17-.03.07-.1.07-.2.02s-.1-.12-.08-.17zm.45.35c.05-.05.13-.05.2.05.08.07.1.14.06.2-.05.04-.13.04-.2-.06-.1-.07-.1-.14-.06-.2zm.43.52c.05-.03.1-.03.15-.03a.2.2 0 01.1.1c.08.1.08.2 0 .25a.08.08 0 01-.1 0c-.02-.03-.1-.05-.15-.08-.05-.12-.05-.22 0-.24zm.5.59c.03-.03.08-.03.13-.03l.15.08c.05.05.07.1.07.15.03.05 0 .1-.02.12-.08.07-.18.07-.3-.05a.22.22 0 01-.08-.17c0-.08.03-.08.05-.1zm.68.52c.03-.1.1-.15.25-.1.15.05.2.1.2.17-.02.08-.05.13-.1.15-.05.02-.1.02-.17 0-.08-.02-.1-.07-.15-.1-.05-.05-.05-.07-.03-.12zm1.28.17c0-.02-.02-.05-.08-.07a.4.4 0 00-.2-.05c-.15 0-.2.05-.2.17 0 .1.08.15.23.15.17-.03.25-.08.25-.2zm.55-.25c.15 0 .23.05.23.13.02.07-.05.15-.2.2-.05 0-.1 0-.15-.03-.05-.02-.08-.07-.08-.15 0-.07.08-.12.2-.15z" fill="currentColor"></path></svg>
                        1904 stars
                    </a>
                    <a href={Azimutt.config(:azimutt_slack)} target="_blank" rel="noopener noreferrer" class="px-3 py-1 text-sm font-semibold leading-6 text-gray-600 transition duration-300 ease-in-out rounded-full bg-gray-50 ring-1 ring-inset ring-gray-200 hover:bg-gray-100 hover:shadow-lg hover:scale-105">
                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none" class="inline -mt-1"><path fill="#E01E5A" d="M4.441 9.847c0 .809-.661 1.47-1.47 1.47-.81 0-1.471-.661-1.471-1.47 0-.81.661-1.471 1.47-1.471h1.471v1.47zm.739 0c0-.81.66-1.471 1.47-1.471.81 0 1.47.661 1.47 1.47v3.683c0 .81-.66 1.47-1.47 1.47-.81 0-1.47-.66-1.47-1.47V9.847z"></path><path fill="#36C5F0" d="M6.65 3.942c-.81 0-1.47-.662-1.47-1.47C5.18 1.661 5.84 1 6.65 1c.81 0 1.47.662 1.47 1.471v1.47H6.65zm.003.741c.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47H2.97c-.81 0-1.471-.66-1.471-1.47 0-.81.661-1.47 1.47-1.47h3.683z"></path><path fill="#2EB67D" d="M12.555 6.153c0-.81.66-1.47 1.47-1.47.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47h-1.47v-1.47zm-.739 0c0 .81-.661 1.47-1.47 1.47-.81 0-1.471-.66-1.471-1.47V2.471c0-.81.661-1.47 1.47-1.47.81 0 1.471.66 1.471 1.47v3.682z"></path><path fill="#ECB22E" d="M10.346 12.058c.809 0 1.47.661 1.47 1.47 0 .81-.661 1.471-1.47 1.471-.81 0-1.471-.66-1.471-1.47v-1.47h1.47zm0-.741c-.81 0-1.471-.661-1.471-1.47 0-.81.661-1.471 1.47-1.471h3.683c.81 0 1.47.661 1.47 1.47 0 .81-.66 1.471-1.47 1.471h-3.682z"></path></svg>
                        Slack community
                    </a>
                </div>
                <div class="px-6 mx-auto max-w-7xl lg:px-8">
                    <div class="max-w-5xl mx-auto text-center">
                        <h1 class="py-12 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
                            Seamless exploration for<br>
                            large & complex <span class="text-indigo-600">databases</span>
                        </h1>
                        <div class="mt-4 flex justify-around items-center flex-col md:flex-row gap-4">
                            <code class="inline-flex items-center space-x-4 bg-gray-800 text-white whitespace-nowrap text-left text-sm sm:text-base rounded-lg p-4 pl-6">
                                <span class="flex gap-4">
                                    <span class="shrink-0 text-gray-500">$</span>
                                    <span class="flex-1">
                                        <span>npx azimutt explore</span>
                                        <span class="text-yellow-500">$db_url</span>
                                    </span>
                                </span>
                                <div class="group relative">
                                    <div class="absolute bottom-[calc(100%+1.5rem)] left-[50%] -translate-x-[50%] hidden group-hover:block w-auto">
                                        <div class="bottom-full right-0 rounded bg-black px-4 py-1 text-xs text-white whitespace-nowrap">
                                            You need <b>npm</b> to run <b>npx</b> command
                                            <svg class="absolute left-0 top-full h-2 w-full text-black" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0" /></svg>
                                        </div>
                                    </div>
                                    <svg class="shrink-0 h-5 w-5 transition text-gray-500 group-hover:text-white cursor-pointer" onclick="navigator.clipboard.writeText('npx azimutt explore $db_url')" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
                                        <path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z"></path>
                                    </svg>
                                </div>
                            </code>
                            <code class="inline-flex items-center space-x-4 bg-gray-800 text-white whitespace-nowrap text-left text-sm sm:text-base rounded-lg p-4 pl-6">
                                <span class="flex gap-4">
                                    <span class="shrink-0 text-gray-500">$</span>
                                    <span class="flex-1">
                                        <span>npx azimutt analyze</span>
                                        <span class="text-yellow-500">$db_url</span>
                                    </span>
                                </span>
                                <div class="group relative">
                                    <div class="absolute bottom-[calc(100%+1.5rem)] left-[50%] -translate-x-[50%] hidden group-hover:block w-auto">
                                        <div class="bottom-full right-0 rounded bg-black px-4 py-1 text-xs text-white whitespace-nowrap">
                                            You need <b>npm</b> to run <b>npx</b> command
                                            <svg class="absolute left-0 top-full h-2 w-full text-black" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0" /></svg>
                                        </div>
                                    </div>
                                    <svg class="shrink-0 h-5 w-5 transition text-gray-500 group-hover:text-white cursor-pointer" onclick="navigator.clipboard.writeText('npx azimutt analyze $db_url')" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
                                        <path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z"></path>
                                    </svg>
                                </div>
                            </code>
                        </div>
                        <%= if @current_user do %>
                            <div class="mt-6">
                                <a href={Routes.user_dashboard_path(@conn, :index)} class="px-8 py-4 font-semibold text-white bg-indigo-600 rounded-md shadow-sm hover:bg-indigo-500">
                                    Access your projects
                                </a>
                            </div>
                        <% else %>
                            <div class="flex items-center justify-center mt-6 gap-x-6">
                                <a href={Routes.elm_path(@conn, :new, %{sample: ""})} class="px-4 py-3 text-sm font-semibold text-white bg-indigo-600 rounded-md shadow-sm hover:bg-indigo-500">
                                    Explore your database
                                </a>
                                <a href={Routes.gallery_path(@conn, :index)} class="text-sm font-semibold leading-6 text-gray-900">Explore samples <span aria-hidden="true">→</span></a>
                            </div>
                            <p class="mt-3 text-sm text-gray-500">
                                Use samples, SQL file or database connection url.<br>
                                <b>No signup required.</b>
                            </p>
                        <% end %>
                        <p class="mt-6 text-lg leading-8 text-gray-600">
                            For Developers, Architects, DBAs, Data Analysts, Product Managers, Tech Support, <b>what about you?</b>
                        </p>
                    </div>
                </div>
                <div class="relative pt-16 overflow-hidden">
                    <div class="mx-auto max-w-7xl px-6 lg:px-8 relative group">
                        <a href="https://azimutt.app/45f571a6-d9b8-4752-8a13-93ac0d2b7984/c00d0c45-8db2-46b7-9b51-eba661640c3c?token=9a59ccbb-7a58-4c88-9dfc-692de6177be9" target="_blank" rel="noopener">
                            <img src={Routes.static_path(@conn, "/images/screenshots/azimutt-ecommerce.png")} alt="E-commerce database demo" width="1600" height="900" class="mb-[-7%] rounded-xl shadow-2xl ring-1 ring-gray-900/10">
                            <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                <div class="absolute inset-0 mx-6 lg:mx-8 bg-gray-700 opacity-30 rounded-xl"></div>
                                <div class="absolute inset-0 flex items-center justify-center"><h2 class="text-white text-3xl font-bold">Click to open demo</h2></div>
                            </div>
                        </a>
                        <div class="relative" aria-hidden="true">
                            <div class="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logo cloud -->
        <div class="px-6 mx-auto my-32 max-w-7xl lg:px-8">
            <div class="grid items-center max-w-lg grid-cols-4 mx-auto gap-x-3 gap-y-12 lg:mx-0 lg:max-w-none lg:grid-cols-8">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/amazon-rds.png")} alt="Amazon RDS" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/amazon-aurora.png")} alt="AMazon Aurora" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/azure-sql.png")} alt="Azure SQL" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/azure-cosmos-db.png")} alt="Azure Cosmos DB" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/google-cloud-sql.png")} alt="Google Cloud SQL" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/alloydb.png")} alt="AlloyDB" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/google-bigquery.png")} alt="BigQuery" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/snowflake.png")} alt="Snowflake" height="48">
            </div>
            <div class="grid items-center max-w-lg grid-cols-4 mx-auto gap-x-3 gap-y-12 mt-12 lg:mx-0 lg:max-w-none lg:grid-cols-8">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/postgres.png")} alt="PostgreSQL" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/mysql.png")} alt="MySQL" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/sqlserver.png")} alt="SQL Server" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/oracle.png")} alt="Oracle" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/mariadb.png")} alt="MariaDB" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/sqlite.png")} alt="SQLite" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/mongodb.png")} alt="MongoDB" height="48">
                <img class="object-contain w-full max-h-12" src={Routes.static_path(@conn, "/images/logos/couchbase.png")} alt="Couchbase" height="48">
            </div>
        </div>

        <!--<section id="main-usage" class="relative py-20 overflow-hidden bg-slate-900 sm:py-32">
            <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
                    <h2 class="text-3xl tracking-tight text-white font-display sm:text-4xl">
                        Are you feeling lost in your database?
                    </h2>
                    <p class="mt-6 text-xl tracking-tight text-blue-100">
                        So were we, this is why we made Azimutt.
                    </p>
                </div>
            </div>
            <div class="relative overflow-hidden">
                <div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
                    <div class="max-w-xl px-4 mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
                        <div class="mt-6">
                            <h3 class="text-2xl leading-7 text-white font-display">
                                Large databases now have an exploration tool.
                            </h3>
                            <p class="mt-6 text-lg text-slate-400">
                                Finding the right tables and relations to work with can be hard, and sincerely, no tool
                                really helps. Until now.<br/> <br/>
                                <strong>Azimutt</strong> allows you to explore your schema: search for
                                relevant tables, follow the relations, hide less interesting columns and even find the paths
                                between tables.
                            </p>
                        </div>
                        <div class="mt-1">
                            <a href={Routes.elm_path(@conn, :new)} class="inline-flex items-center justify-center px-4 py-2 mt-8 text-sm text-white rounded-full group ring-1 focus:outline-none ring-slate-700 hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white">
                                🎉 &nbsp; Let's try it!
                            </a>
                        </div>
                    </div>
                    <div class="mt-12 sm:mt-16 lg:col-start-2">
                        <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
                            <img src={Routes.static_path(@conn, "/images/feature_1.png")} alt="Basic schema by Azimutt" class="w-auto rounded-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" />
                        </div>
                    </div>
                </div>
            </div>
        </section>-->

        <!-- Personas -->
        <div id="personas" class="px-6 mx-auto my-32 max-w-7xl lg:px-8">
            <div class="mx-auto max-w-2xl lg:text-center">
                <p class="text-base font-semibold leading-7 text-indigo-600">A versatile tool</p>
                <h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Who needs Azimutt?</h2>
                <p class="mt-6 text-lg leading-8 text-gray-600">
                    Azimutt is targeted for companies with large databases.
                    Either with a large monolith or many microservices, once your system grows, you need visualization tools to stay performant.
                </p>
            </div>
            <div class="mx-auto my-16 max-w-2xl sm:my-20 lg:my-24 lg:max-w-5xl">
                <dl class="grid max-w-xl grid-cols-1 gap-y-10 gap-x-8 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
                    <div class="relative pl-16">
                        <dt class="text-base font-semibold leading-7 text-gray-900">
                            <div class="absolute top-0 left-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
                                <Icon.draw name="cursor-arrow-rays" kind="outline" class="text-white" />
                            </div>
                            The Explorer
                        </dt>
                        <dd class="mt-2 text-base leading-7 text-gray-600 prose">
                            <p>Working on a new database or new area of the database.</p>
                            <ul class="list-image-checkmark">
                                <li>dev joining a new team/company</li>
                                <li>data analyst with a new data source</li>
                                <li>team handling a new external integration</li>
                            </ul>
                            <p>Azimutt makes database exploration easy by building incrementally your layouts with search everywhere, follow relations, find path and more...</p>
                        </dd>
                    </div>
                    <div class="relative pl-16">
                        <dt class="text-base font-semibold leading-7 text-gray-900">
                            <div class="absolute top-0 left-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
                                <Icon.draw name="academic-cap" kind="outline" class="text-white" />
                            </div>
                            The Archivist
                        </dt>
                        <dd class="mt-2 text-base leading-7 text-gray-600 prose">
                            <p>Looking to improve teams collaboration and efficiency.</p>
                            <ul class="list-image-checkmark">
                                <li>engineering efficiency teams improving onboarding</li>
                                <li>managers improving organizations (CTO, director)</li>
                                <li>tech leaders sharing knowledge</li>
                            </ul>
                            <p>
                                Azimutt makes great database documentation for operational people with tables/columns notes and tags, saved layouts, layout memos and more...<br>
                                <small>*soon: custom properties on tables/columns</small>
                            </p>
                        </dd>
                    </div>
                    <div class="relative pl-16">
                        <dt class="text-base font-semibold leading-7 text-gray-900">
                            <div class="absolute top-0 left-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
                                <Icon.draw name="bars-arrow-down" kind="outline" class="text-white" />
                            </div>
                            The Digger
                        </dt>
                        <dd class="mt-2 text-base leading-7 text-gray-600 prose">
                            <p>Needs to find information in the database quickly.</p>
                            <ul class="list-image-checkmark">
                                <li>support team answering customers</li>
                                <li>dev working on bug investigation</li>
                            </ul>
                            <p>
                                Azimutt has innovative data exploration with follow relations in the data, AI generated SQL and queries to multiple databases in the same tool.<br>
                                <small>*soon: saved queries, graphs, AI query explanation/fix/optimization</small>
                            </p>
                        </dd>
                    </div>
                    <div class="relative pl-16">
                        <dt class="text-base font-semibold leading-7 text-gray-900">
                            <div class="absolute top-0 left-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
                                <Icon.draw name="shield-check" kind="outline" class="text-white" />
                            </div>
                            The Doctor
                        </dt>
                        <dd class="mt-2 text-base leading-7 text-gray-600 prose">
                            <p>Take care of the database, ensure it works smoothly.</p>
                            <ul class="list-image-checkmark">
                                <li>DBA investigating a slow query</li>
                                <li>DB teams ensuring best practices and optimization</li>
                                <li>leaders looking to have insights on database tech debt</li>
                            </ul>
                            <p>
                                Azimutt offer tens of rules to make sure you avoid common mistakes, schema but also runtime.<br>
                                <small>*soon: custom rules, alerting, scoring</small>
                            </p>
                        </dd>
                    </div>
                </dl>
            </div>
            <div class="mx-auto max-w-xl prose">
                <h2 class="text-center">Why NOT use Azimutt:</h2>
                <ul>
                    <li>you have an easy-to-understand database (small or obvious)</li>
                    <li>you just need to draw a few tables for your side-project</li>
                    <li>you have all you need in your code, and don't look at your database</li>
                </ul>
                <p>While working well at small scale, you may find cheaper tools that also work.</p>
            </div>
        </div>

        <!-- Testimonial -->
        <div class="mx-auto my-32 max-w-7xl sm:px-6 lg:px-8">
            <%= render AzimuttWeb.PartialsView, "_testimonial_card_black.html",
            author: %{name: "Loïc Knuchel", description: "Co-founder of Azimutt"},
            quote: "I've been there: reverse engineering large databases, looking for a tool to help me, sad, disappointed and giving up with every tool...
            So here I'm, building Azimutt, the perfect tool to explore large databases."
            |> String.split("\n", trim: false) |> Enum.intersperse(Phoenix.HTML.Tag.tag(:br)),
            background: "https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80"
            %>
        </div>

        <!-- Feature section -->
        <div id="features" class="px-6 mx-auto my-32 max-w-7xl lg:px-8">
            <%= render AzimuttWeb.PartialsView, "_features_2columns.html",
            section: "A powerful companion",
            title: "Dive in your database, at any level",
            description: "Start with schema exploration, continue with data exploration and easily access database statistics. Document your findings. Get improvement suggestions.",
            features: Azimutt.showcase_usages |> Enum.map(fn u -> %{icon: u.icon, name: u.name, description: u.description, url: Routes.website_path(@conn, :use_cases_show, u.id)} end)
            %>
        </div>

        <div id="testimonials" class="my-32">
            <%= render AzimuttWeb.PartialsView, "_testimonials.html",
                section: "Testimonials",
                title: "People are loving Azimutt, and have spread the word",
                center: %{author: %{name: "Jordan Temim", description: "Head of Engineering at Swile", avatar: Routes.static_path(@conn, "/images/avatars/jordan-temim.jpg")}, text: "Quick summer message to highlight Loïc Knuchel's incredible work on Azimutt app! It's an advanced ER Diagram tool that allows you to explore your database schema, prepare migrations, focus on a group of tables precisely and even ask for the shortest path between several relationships. If modeling is important to you, I recommend this tool!", url: "https://www.linkedin.com/feed/update/urn%3Ali%3Aactivity%3A6963834821580099584"},
                left: [
                    %{author: %{name: "Miguel Cobá", description: "Software developer", avatar: Routes.static_path(@conn, "/images/avatars/miguel-coba.jpg")}, text: "Wow that's a dope app. It looks very responsive. And the controls seem very  polished. Amazing job, Loïc! And congrats on the release.", url: "https://twitter.com/MiguelCoba_/status/1442434336653860874"},
                    %{author: %{name: "Adrian Sieber", description: "CEO of feram.io", avatar: Routes.static_path(@conn, "/images/avatars/adrian-sieber.jpg")}, text: "Nice! Really beautiful app and it works quite smoothly. I especially like that you can start from scratch and build up the graph with only the tables which you are interested in. In some other tools it’s always quite an info dump.", url: "https://discourse.elm-lang.org/t/azimutt-explore-your-database-thanks-to-elm/7734/13"},
                    %{author: %{name: "Jas", description: "Data Analyst, Programmer", avatar: Routes.static_path(@conn, "/images/avatars/jas.jpg")}, text: "First impression - it is amazing!!, will come back if any questions, thank you", url: "https://twitter.com/mankotia2012/status/1603076389799968773"},
                ],
                center_left: [
                    %{author: %{name: "nikosv", description: "Techjournalism @i-programmer.info", avatar: Routes.static_path(@conn, "/images/avatars/nikosv.jpg")}, text: "Azimutt has really made a difference. keep up the good work!", url: "https://twitter.com/nikosvg/status/1557975423186878464"}
                ],
                center_right: [
                    %{author: %{name: "Jérémy Buget", description: "Co-founder & CTO of pix.fr", avatar: Routes.static_path(@conn, "/images/avatars/jeremy-buget.jpg")}, text: "Aujourd'hui j'ai découvert @azimuttapp, un service en ligne pour y voir plus clair et plus joli dans son schéma de données. Idéal pour les nouveaux-venus d'un projet.", url: "https://twitter.com/jbuget/status/1561708207764029440"}
                ],
                right: [
                    %{author: %{name: "Tibo", description: "Building tweethunter.io & taplio.com", avatar: Routes.static_path(@conn, "/images/avatars/tibo-maker.jpg")}, text: "As a dev, i love it!!", url: "https://twitter.com/tibo_maker/status/1443603421970386944"},
                    %{author: %{name: "Oliver Searle Barnes", description: "Consultant at Boulevard", avatar: Routes.static_path(@conn, "/images/avatars/oliver-searle-barnes.png")}, text: "I mainly wanted to add some praise. The app seems really well thought out, particularly the control you have over what to include in the diagram and the ability to save different views. This feels like the workflow I never knew I wanted until trying it just now.", url: "https://discourse.elm-lang.org/t/azimutt-explore-your-database-thanks-to-elm/7734/10"},
                    %{author: %{name: "Guillaume Lagorce", description: "Développeur principal at Turbulent", avatar: Routes.static_path(@conn, "/images/avatars/guillaume-lagorce.jpg")}, text: "I tried Azimutt recently and it is really great. ", url: "https://twitter.com/GUL_THE_TWITTO/status/1627332251603050497"},
                ]
            %>
        </div>

        <div id="talk" class="bg-slate-900 py-24 sm:py-32">
          <div class="relative isolate">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
              <div class="mx-auto flex max-w-2xl flex-col gap-8 bg-white/5 px-6 py-16 ring-1 ring-white/10 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:py-20 xl:gap-x-20 xl:px-20">
                <div class="w-full flex-auto">
                  <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Azimutt at Devoxx France</h2>
                  <p class="mt-6 text-lg leading-8 text-gray-300">
                    The talk is mostly a live demo showing Azimutt capabilities. It starts with the current status, its architecture and finish with planned evolutions.
                    <a href="https://docs.google.com/presentation/d/1IBGXxA-NtC3wh793ycry3YaWTBu8xiW-wzvnL_mWbWY" target="_blank" rel="noopener noreferrer" class="underline">Slides</a> are published if you prefer a writen version.
                    It's in french but you can activate <span class="italic">english subtitles</span>.<br>
                    We also had a 15 min talk at <a href="https://www.youtube.com/watch?v=6wYNlZKOtm0" target="_blank" rel="noopener noreferrer" class="underline">FOSDEM 2024</a> in english, but Azimutt evolved a lot in 2 months 🤯
                  </p>
                </div>
                <iframe
                  class="w-full rounded-lg"
                  width="1056"
                  height="600"
                  src="https://www.youtube-nocookie.com/embed/_wkS1B-krRw?si=hFbxL4Zwo1QyFopO"
                  title="Réinventer l'exploration des bases de données avec Azimutt"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allowfullscreen>
                </iframe>
              </div>
            </div>
            <div class="absolute inset-x-0 -top-16 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl" aria-hidden="true">
              <div class="aspect-[1318/752] w-[82.375rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-25" style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)"></div>
            </div>
          </div>
        </div>

        <!-- CTA section -->
        <div id="cta-last" class="relative px-6 my-32 -z-10 lg:px-8">
            <%= render AzimuttWeb.PartialsView, "_bg_gradient_light2.html" %>
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Boost your productivity.<br>Start using Azimutt today.</h2>
                <p class="max-w-xl mx-auto mt-6 text-lg leading-8 text-gray-600">
                    Still not convinced?
                    Take a look at <a href={Routes.website_path(@conn, :use_cases_index)} class="underline">use cases</a> and <a href={Routes.website_path(@conn, :features_index)} class="underline">features</a>.
                    We can answer any question, reach us on
                    <a href={Azimutt.config(:azimutt_slack)} target="_blank" rel="noopener noreferrer" class="underline">Slack</a>,
                    <a href={Azimutt.config(:azimutt_twitter)} target="_blank" rel="noopener noreferrer" class="underline">Twitter</a>,
                    <a href={Azimutt.config(:azimutt_github)} target="_blank" rel="noopener noreferrer" class="underline">GitHub</a> or
                    <a href={"mailto:#{Azimutt.config(:contact_email)}"} target="_blank" rel="noopener noreferrer" class="underline">Email</a>.
                </p>
                <div class="flex items-center justify-center mt-10 gap-x-6">
                    <a href={Routes.user_session_path(@conn, :new)} class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Join 4000+ early adopters</a>
                    <a href={Routes.gallery_path(@conn, :index)} class="text-sm font-semibold leading-6 text-gray-900">Browse samples <span aria-hidden="true">→</span></a>
                </div>
            </div>
        </div>
    </main>
</div>

<%= render "_footer.html", conn: @conn %>
<%= # render "_heroku_addon.html" %>
